<template>
  <div>
    <van-swipe :loop="false" :width="width" :show-indicators="false">
      <van-swipe-item v-for="(item, index) in items" :key="item.id" @touchstart="onSyTouchStart"
        @touchmove="onSyTouchMove"
        @touchend="onSyTouchEnd(index)" v-cloak>
        <div class="item aui-text-center aui-padded-l-5 aui-padded-r-5" style="transform: translateZ(0)">
          <div class="good-img" :style="{backgroundImage:'url(' + item.image + ')'}" v-lazy="item.image"></div>
          <div class="price aui-ftn12 aui-padded-t-5 aui-padded-b-5" :class="{'aui-text-red': item.status, 'aui-text-9': !item.status}">¥{{item.price}}</div>
            <div>
            <div class="aui-btn aui-ftn12" :class="{'aui-btn-danger': item.status}" v-text="item.text"></div>
            </div>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
  import home from "../../../service/home.js"
  export default {
    data () {
      return {
        width: (document.documentElement.clientWidth - 30) / 4,
        items: [],
        clickFlag: false
      }
    },
    props: ['type', 'random'],
    mounted() {
      this.fnGetFreeData()
    },
	watch: {
		random(newValue, oldValue) {
			this.fnGetFreeData()
		}
	},
    methods: {
      // 用于判断滑动还是点击swiper
      onSyTouchStart (e) {
        this.clickFlag = false;
      },
      // 用于判断滑动还是点击
      onSyTouchMove (e) {
        this.clickFlag = true;
      },
      onSyTouchEnd (position) {
        if (this.clickFlag) { // 滑动
        } else { // 点击
          this.fnOpenProduct(this.items[position].id)
        }
      },
      fnGetFreeData: function () {
        home.fnGetHot({type: this.type, isLoading: true}).then(res => {
          if (res && res.status) {
            this.items = res.data;
          }
        })
      },
      fnOpenProduct: function(id) {
        this.utils.fnOpenCommon(this, {name:'product', params: {id: id}})
      }
    }
  }
</script>

<style>
</style>
